import {
  Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ElementRef,
  Renderer2
} from '@angular/core';
import {ImageServeService} from "@shared/service/image/image-serve.service";

import {SeedInfiniteScroll} from "@shared/components/infinite-scroll/seed-infinite-scroll/seed-infinite-scroll.component";
import {Subject} from "rxjs/Subject";
import {takeUntil} from "rxjs/operator/takeUntil";
import * as API from "@api/index";

import {ActivatedRoute, Params, Router} from "@angular/router";
import {ServiceCardDetailRespVO} from "@interface/index";
import {GoodsService} from "@goods/goods.service";


@Component({
  selector: 'ordinary-service-detail',
  templateUrl: './ordinary-service-detail.component.html',
  styleUrls: ['./ordinary-service-detail.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class OrdinaryServiceDetailComponent implements OnInit {
  @ViewChild(SeedInfiniteScroll) infiniteScroll;
  public ngUnsubscribe: Subject<void> = new Subject<void>();
  public recommendGoods: Array<any> = [];
  public cardBasicInfo: ServiceCardDetailRespVO;
  public cardNo: string;
  public params = {
    goodsCategoryCode: '',
    page: 1,
    rows: 10
  };
  // state (integer, optional): 服务卡状态:1未激活、2服务中（可使用、激活）、3已完成、4不可用、5已终止、6已冻结 ,
  public cardStatusStore = [{
    state: '',
    tip: '',
    color: '',
    icon: ''
  }, {
    state: '未激活',
    tip: '未激活',
    color: '#e94141',
    icon: 'spell_warning.png'
  }, {
    state: '可使用',
    tip: '已完成',
    color: '#70d77b',
    icon: 'pay_success.png'
  }, {
    state: '已完成',
    tip: '已完成',
    color: '#e94141',
    icon: 'pay_success.png'
  }, {
    state: '不可用',
    tip: '不可用',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    state: '已终止',
    tip: '已终止',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    state: '已冻结',
    tip: '已冻结',
    color: '#c1c1c1',
    icon: 'spell_warning.png'
  }];

  constructor(public imgService: ImageServeService,
              public goodsService: GoodsService,
              private renderer: Renderer2,
              private ele: ElementRef,
              private route: ActivatedRoute) {
    this.route.queryParams.subscribe((params: Params) => {
      this.cardNo = params['cardNo'];
      this.getServiceCardDetail();
    });
  }

  /**
   * @description 获取服务卡详情
   * @author ouyqx691
   * @date 2018-3-13
   */
  getServiceCardDetail() {
    const params = {
      cardNo: this.cardNo
    };
    this.goodsService.getServiceCardDetail(params)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(res => {
        if (res.result === '0' && res.data) {
          this.cardBasicInfo = res.data;
          this.params.goodsCategoryCode = res.data.goodsCateCode;
          this.getRecommendGoods();
        }
      });
  }

  /**
   * @description 获取推荐商品
   * @author ouyqx-691
   * @date 2017-09-11
   */
  getRecommendGoods() {
    this.goodsService.getRecommendGoods(this.params)
      .takeUntil(this.ngUnsubscribe)
      .debounceTime(800)
      .subscribe(res => {
        this.infiniteScroll.complete();
        if (res.result === '0' && res.data.list && res.data.list.length > 0) {
          const goods = res.data.list;
          this.params.page++;
          this.recommendGoods = this.recommendGoods.concat(goods);
          if (!res.data.hasNextPage) { // 限制只加载200条
            this.infiniteScroll.enable(false);
          }
        }
      });
  }

  ngOnInit() {

  }
}
